<template>
    <el-dialog class="order-status-dialog" v-model="dialogVisible" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :show-close="false" :lock-scroll="false" title="头像裁剪" width="400px" top="20vh"
        center>
        <VuePictureCropper :boxStyle="{
            width: '100%',
            height: '300px',
            backgroundColor: '#f8f8f8',
            margin: 'auto',
        }" :img="image" :options="{
    viewMode: 1,
    dragMode: 'move',
    aspectRatio: 1,
    cropBoxResizable: true,
}" :presetMode="{
    mode: 'fixedSize',
    width: 300,
    height: 300,
}" />

        <template #footer>
            <el-button @click="onCancel()"> 关闭 </el-button>
            <el-button :loading="isLoading" type="primary" @click="onConfirm()">
                {{ isLoading ? "上传中..." : "确定" }}
            </el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import VuePictureCropper from "vue-picture-cropper";
import { useContent } from ".";

const { dialogVisible, image, fileName, isLoading, onCancel, onConfirm } =
    useContent();

defineExpose({
    show(file, name) {
        image.value = file;
        fileName.value = name;
        dialogVisible.value = true;
    },
});
</script>
<style lang="scss" scoped></style>
